<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: ZJZ
 * @Date: 2021-05-24 14:30:31
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:50:26
-->

<template>
  <div>
    <el-dialog
      title="新增员工"
      :visible.sync="dialog.dialogStaffVisble"
      width="60%"
      @close="newStaffClose"
      custom-class="dialogClass"
      :close-on-click-modal="false"
    >
      <el-form
        :model="newStaffForm"
        ref="newStaffForm"
        :rules="newStaffrules"
        :label-position="labelPosition"
        v-if="dialog.dialogStaffVisble"
      >
        <div class="vertical">基础信息</div>
        <div class="basics">
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="newStaffForm.name"
              style="width: 330px"
              placeholder="请输入员工真实姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phoneNumber">
            <el-input
              v-model="newStaffForm.phoneNumber"
              placeholder="请输入员工手机号"
              style="width: 330px"
              oninput="value=value.replace(/[^\d]/g,'')"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio v-model="newStaffForm.sex" label="0">男</el-radio>
            <el-radio v-model="newStaffForm.sex" label="1">女</el-radio>
          </el-form-item>
          <el-form-item label="员工生日">
            <el-date-picker
              v-model="newStaffForm.birthday"
              type="date"
              style="width: 330px"
              placeholder="请选择员工生日"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="身份证号码" prop="idNumber">
            <el-input
              v-model="newStaffForm.idNumber"
              placeholder="请输入员工身份证"
              style="width: 330px"
            ></el-input>
          </el-form-item>
          <el-form-item label="身份证有效期">
            <el-date-picker
              v-model="newStaffForm.idStartTime"
              type="date"
              style="width: 330px"
              placeholder="请选择身份证有效期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="公司名称" prop="companyName">
            <el-input
              v-model="newStaffForm.companyName"
              placeholder="请输入公司名称"
              style="width: 330px"
            ></el-input>
          </el-form-item>
          <el-form-item label="部门">
            <el-input
              v-model="newStaffForm.deptName"
              placeholder="请输入部门名称"
              style="width: 330px"
            ></el-input>
          </el-form-item>
        </div>
        <div class="vertical" style="margin-top: 20px">图片信息</div>
        <div class="image">
          <el-form-item label="身份证正面">
            <el-upload
              :class="{ disabled: fileList.length > 0 }"
              ref="upload"
              action="#"
              list-type="picture-card"
              :auto-upload="false"
              accept="image/jpeg,image/png"
              :before-upload="onBeforeUpload"
              :limit="1"
              :on-change="getFile"
              :file-list="fileList"
              :on-remove="fileRemove"
              v-loading="loading"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <span class="suggest">图片建议上传：jpg/png，最多上传一张</span>
          </el-form-item>
          <el-form-item label="身份证反面">
            <el-upload
              :class="{ disabled1: fileList1.length > 0 }"
              ref="upload1"
              action="#"
              list-type="picture-card"
              :auto-upload="false"
              accept="image/jpeg,image/png"
              :before-upload="onBeforeUpload"
              :limit="1"
              :on-change="getFile1"
              :file-list="fileList1"
              :on-remove="fileRemove1"
              v-loading="loading1"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <span class="suggest">图片建议上传：jpg/png，最多上传一张</span>
          </el-form-item>
          <el-form-item label="证件照">
            <el-upload
              :class="{ disabled2: fileList2.length > 0 }"
              ref="upload2"
              action="#"
              list-type="picture-card"
              :auto-upload="false"
              accept="image/jpeg,image/png"
              :before-upload="onBeforeUpload"
              :limit="1"
              :on-change="getFile2"
              :file-list="fileList2"
              :on-remove="fileRemove2"
              v-loading="loading2"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <span class="suggest">图片建议上传：jpg/png，最多上传一张</span>
          </el-form-item>
          <el-form-item label="学历证">
            <el-upload
              :class="{ disabled3: fileList3.length > 0 }"
              ref="upload3"
              action="#"
              list-type="picture-card"
              :auto-upload="false"
              accept="image/jpeg,image/png"
              :before-upload="onBeforeUpload"
              :limit="1"
              :on-change="getFile3"
              :file-list="fileList3"
              :on-remove="fileRemove3"
              v-loading="loading3"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <span class="suggest">图片建议上传：jpg/png，最多上传一张</span>
          </el-form-item>
        </div>
        <div class="vertical" style="margin-top: 20px">其他信息</div>
        <div class="other">
          <el-form-item label="工号">
            <el-input
              v-model="newStaffForm.jobNumber"
              placeholder="请输入员工工号"
              style="width: 330px"
            ></el-input>
          </el-form-item>
          <el-form-item label="文化程度" prop="education">
            <el-select
              v-model="newStaffForm.education"
              placeholder="请选择文化程度"
              style="width: 330px"
            >
              <el-option
                v-for="item in degree"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="劳动合同">
            <el-upload
              class="upload-demo"
              action="#"
              :on-change="handleChange"
              :file-list="fileList4"
              :http-request="httpRequest"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="劳动合同开始时间">
            <el-date-picker
              v-model="newStaffForm.contractStart"
              type="date"
              style="width: 330px"
              placeholder="请选择劳动合同开始时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="劳动合同结束时间">
            <el-date-picker
              v-model="newStaffForm.contractEnd"
              type="date"
              style="width: 330px"
              placeholder="请选择劳动合同结束时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="联系地址">
            <el-input
              v-model="newStaffForm.contactAddress"
              placeholder="请填写联系地址"
              style="width: 330px"
            ></el-input>
          </el-form-item>
          <el-form-item label="简历信息">
            <el-input
              type="textarea"
              v-model="newStaffForm.resumeInformation"
              rows="4"
              placeholder="请填写简历信息"
              style="width: 330px"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注信息">
            <el-input
              type="textarea"
              v-model="newStaffForm.remark"
              rows="4"
              placeholder="请填写备注信息"
              style="width: 330px"
            ></el-input>
          </el-form-item>
          <el-form-item label="工作状态">
            <el-select
              v-model="newStaffForm.jobState"
              placeholder="请选择工作状态"
              style="width: 330px"
            >
              <el-option
                v-for="item in jobState"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer">
        <el-button @click="dialog.dialogStaffVisble = false">取消</el-button>
        <el-button
          type="primary"
          @click="submit"
          v-loading.fullscreen.lock="fullscreenLoading"
          v-if="putD"
        >
          保存
        </el-button>
        <el-button
          type="primary"
          @click="onSubmit"
          v-loading.fullscreen.lock="fullscreenLoading"
          v-else
          >保存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addPerson, putDetail, getUrl } from "@/api/registration";
var newStaff = {
  name: "",
  phoneNumber: "",
  sex: "0",
  birthday: "",
  idNumber: "",
  idStartTime: "",
  companyName: "",
  deptName: "",
  idPositive: "", //身份证正面
  idBack: "", //身份证反面
  idPhoto: "", //证件照
  educationPhoto: "", //学历证
  jobNumber: "",
  education: "",
  contractStart: "", // 劳动开始时间
  contractEnd: "", // 劳动结束时间
  contactAddress: "", //联系地址
  resumeInformation: "", //简历信息
  remark: "", // 备注信息
  jobState: "", //工作状态
  uploadName: "",
};
export default {
  props: {
    dialog: {
      type: Object,
      required: true,
    },
    putStaff: {
      type: Object,
      required: true,
    },
  },
  watch: {
    putStaff: {
      deep: true,
      handler() {
        if (this.putStaff !== {}) {
          this.newStaffForm = this.putStaff;
          this.putD = false;
          if (
            this.putStaff.fileName !== null &&
            this.putStaff.fileName !== ""
          ) {
            this.newStaffForm.uploadName = this.putStaff.fileName;
          }
        }
      },
    },
  },
  data() {
    let checkMobile = (rule, value, callback) => {
      // 验证手机号的正则表达式
      const regMobile =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

      if (regMobile.test(value)) {
        // 合法的手机号
        return callback();
      }
      // 不合法
      callback(new Error("请输入合法的手机号"));
    };
    let checkId = (rule, value, callback) => {
      // 验证身份证的正则表达式
      const regId =
        /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

      if (regId.test(value)) {
        // 合法的身份证号
        return callback();
      }
      // 不合法
      callback(new Error("请输入合法的身份证号码"));
    };
    return {
      loading: false,
      loading1: false,
      loading2: false,
      loading3: false,
      fullscreenLoading: false,
      putD: true,
      jobState: [
        {
          value: "1",
          label: "在职",
        },
        {
          value: "2",
          label: "离职",
        },
      ],
      degree: [
        {
          value: "1",
          label: "小学",
        },
        {
          value: "2",
          label: "初中",
        },
        {
          value: "3",
          label: "高中/中专",
        },
        {
          value: "4",
          label: "专科",
        },
        {
          value: "5",
          label: "本科",
        },
        {
          value: "6",
          label: "研究生",
        },
      ],
      labelPosition: "top",
      newStaffForm: {
        ...newStaff,
      },
      file: {},
      newStaffrules: {
        name: [{ required: true, message: "请输入人员姓名", trigger: "blur" }],
        phoneNumber: [
          { required: true, message: "请输入用户手机号", trigger: "blur" },
          { required: true, validator: checkMobile, trigger: "blur" },
        ],
        idNumber: [
          {
            required: true,
            min: 18,
            max: 18,
            message: "请输入人员身份证号",
            trigger: "blur",
          },
          {
            required: true,
            validator: checkId,
            trigger: "blur",
          },
        ],
        companyName: [
          { required: true, message: "请输入公司名称！", trigger: "blur" },
        ],
        education: [
          { required: true, message: "请选择文化程度", trigger: "change" },
        ],
      },

      fileList: [],
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      positive: "",
      back: "",
      photo: "",
      eduPhoto: "",
    };
  },
  mounted() {},
  methods: {
    valWidthAndHeight(file) {
      return new Promise((resolve, reject) => {
        const _URL = window.URL || window.webkitURL;
        const image = new Image();
        image.src = _URL.createObjectURL(file);
        console.log(_URL.createObjectURL(file));
        image.onload = function () {
          file.width = image.width;
          file.height = image.height;
          resolve(file);
        };
      }).then(
        (file) => {
          console.log(file);
          return file;
        },
        () => {
          console.log(1);
          return Promise.resolve();
        }
      );
    }, // 查宽高
    fileRemove() {
      this.fileList = [];
    },
    fileRemove1() {
      this.fileList1 = [];
    },
    fileRemove2() {
      this.fileList2 = [];
    },
    fileRemove3() {
      this.fileList3 = [];
    },
    newStaffClose() {
      this.newStaffForm = {
        ...newStaff,
      };
      this.fileList = [];
      this.fileList1 = [];
      this.fileList2 = [];
      this.fileList3 = [];
      this.fileList4 = [];
    },
    httpRequest(data) {
      this.file = data.file;
    },
    onBeforeUpload() {
      const isIMAGE = file.type === "image/jpeg" || "image/png";
      if (!isIMAGE) {
        this.$message.error("上传文件只能是图片格式!");
      }
      return isIMAGE;
    },
    getFile(file) {
      this.loading = true;
      this.compress(file.raw).then((res) => {
        var fd = new FormData();
        fd.append("file", res);
        getUrl(fd).then((res) => {
          this.positive = res.msg;
          this.loading = false;
        });
      });
      this.fileList.push(file);
    },
    getFile1(file) {
      this.loading1 = true;
      this.compress(file.raw).then((res) => {
        var fd = new FormData();
        fd.append("file", res);
        getUrl(fd).then((res) => {
          this.loading1 = false;
          this.back = res.msg;
        });
      });
      this.fileList1.push(file);
    },
    getFile2(file) {
      this.loading2 = true;
      this.compress(file.raw).then((res) => {
        var fd = new FormData();
        fd.append("file", res);
        getUrl(fd).then((res) => {
          this.photo = res.msg;
          this.loading2 = false;
        });
      });
      this.fileList2.push(file);
    },
    getFile3(file) {
      this.loading3 = true;
      this.compress(file.raw).then((res) => {
        var fd = new FormData();
        fd.append("file", res);
        getUrl(fd).then((res) => {
          this.eduPhoto = res.msg;
          this.loading3 = false;
        });
      });
      this.fileList3.push(file);
    },
    handleChange(file) {
      this.putStaff.fileName = "";
      this.newStaffForm.uploadName = file.name;
    },
    async submit() {
      this.$refs.newStaffForm.validate(async (valid) => {
        if (!valid) return;
        if (
          this.loading == true ||
          this.loading1 == true ||
          this.loading2 == true ||
          this.loading3 == true
        ) {
          return this.$message.info("图片正在上传中，请稍等");
        }
        this.fullscreenLoading = true;
        let fd = new FormData();
        fd.append("personStr", JSON.stringify(this.newStaffForm));
        fd.append("file", this.file);
        fd.append("positive", this.positive);
        fd.append("back", this.back);
        fd.append("photo", this.photo);
        fd.append("eduPhoto", this.eduPhoto);
        let res = await addPerson(fd);
        this.$message.success(res.msg);
        this.$parent.getPersonData();
        this.newStaffForm = {
          ...newStaff,
        };
        this.fullscreenLoading = false;
        this.dialog.dialogStaffVisble = false;
      });
    },
    onSubmit() {
      this.$refs.newStaffForm.validate(async (valid) => {
        if (!valid) return;
        if (
          this.loading == true ||
          this.loading1 == true ||
          this.loading2 == true ||
          this.loading3 == true
        ) {
          return this.$message.info("图片正在上传中，请稍等");
        }
        this.fullscreenLoading = true;
        let fd = new FormData();
        fd.append("personStr", JSON.stringify(this.newStaffForm));
        fd.append("file", this.file);
        fd.append("positive", this.positive);
        fd.append("back", this.back);
        fd.append("photo", this.photo);
        fd.append("eduPhoto", this.eduPhoto);
        putDetail(fd).then((res) => {
          this.$message.success(res.msg);
          this.$parent.getPersonData();
          this.newStaffForm = {
            ...newStaff,
          };
          this.fullscreenLoading = false;
          this.dialog.dialogStaffVisble = false;
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.vertical {
  padding-left: 100px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2b2b2b;
  line-height: 14px;
}
.vertical::before {
  content: "";
  display: inline-block;
  margin-right: 10px;
  width: 3px;
  height: 14px;
  background-color: #1267fa;
}
.basics {
  display: flex;
  flex-wrap: wrap;
}
.el-form-item {
  margin-top: 17px;
  margin-left: 100px;
  width: 330px;
  margin-right: 50px;
  margin-bottom: 0px;
}
/deep/ .el-form-item__label {
  padding: 0;
}
.image {
  display: flex;
  flex-wrap: wrap;
}
.suggest {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
}
.other {
  display: flex;
  flex-wrap: wrap;
}
/deep/ .el-dialog__body {
  height: 700px;
  overflow-y: auto;
}
/deep/.el-upload-list__item-status-label {
  i {
    margin-top: 10px;
  }
}
/deep/.el-icon-close {
  margin-top: 8px;
}
/deep/ .disabled .el-upload--picture-card {
  display: none;
}
/deep/ .disabled1 .el-upload--picture-card {
  display: none;
}
/deep/ .disabled2 .el-upload--picture-card {
  display: none;
}
/deep/ .disabled3 .el-upload--picture-card {
  display: none;
}
/deep/ .el-loading-mask {
  transform: translate(-15%);
}
</style>